<template>
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="sum++">点击+1</button>
    <hr>
    <h2>当前消息为：{{ msg }}</h2>
    <button @click="msg += '!'">修改消息</button>

    <p style="text-align: left;border-top: 1px solid #000;">
        在控制台查看输出效果
        <br>
        监控基本数据类型可正常返回 newValue 和 oldValue；
        <br>
        但是监控对象数据类型返回的 newValue 和 oldValue 一致，即存在 BUG

    </p>
</template>

<script lang="ts">
import { ref, watch } from 'vue'

export default {
    name: 'watch_ref',
    setup() {

        // 数据（响应式）
        let sum = ref(0)
        let msg = ref('你好')

        // 情况1：监视 ref 所定义的一个响应式数据（懒加载）
        // watch(sum,(newValue,oldValue)=>{
        //     console.log('sum 发生改变',newValue,oldValue);
        // })

        // 情况1：监视 ref 所定义的一个响应式数据（即时回调）
        watch(sum, (newValue, oldValue) => {
            console.log('sum 发生改变', newValue, oldValue);
        }, { immediate: true })

        // 情况2：监视 ref 所定义的多个响应式数据
        // watch([sum,msg],(newValue,oldValue)=>{
        //     console.log('sum 和 msg 发生改变',newValue,oldValue);
        // })


        // 方法

        return {
            sum,
            msg

        }
    }
} 
</script>
<style></style>